use leptos::prelude::*;
use wasm_bindgen::prelude::*;
use web_sys::{Document, HtmlLinkElement, Window};

/// 动态加载 CSS 文件的函数
#[wasm_bindgen]
pub fn load_css(href: &str) {
    let window: Window = web_sys::window().expect("no global `window` exists");
    let document: Document = window.document().expect("should have a document on window");

    // 创建 link 元素
    let link_element: HtmlLinkElement = document
        .create_element("link")
        .expect("failed to create link element")
        .dyn_into()
        .expect("failed to convert to link element");

    // 设置 link 属性
    link_element.set_rel("stylesheet");
    link_element.set_href(href);

    // 添加到 head
    if let Some(head) = document.head() {
        head.append_child(&link_element)
            .expect("failed to append stylesheet to head");
    }
}

/// 初始化组件库样式的函数
pub fn init_styles() {
    // 加载组件库内置的 Tailwind CSS
    load_css("/r2mo-webel/tailwind.css");
}

/// 提供一个组件，用于在视图中确保样式被加载
#[component]
#[must_use]
pub fn StylesProvider() -> impl IntoView {
    // 在组件挂载时初始化样式
    on_cleanup(move || {
        // 这个清理函数实际上不会清理样式，因为我们希望样式在整个应用生命周期内都可用
    });

    // 在组件创建时加载样式
    init_styles();

    // 使用空字符串返回空视图，避免 Clippy 警告
    ""
}